<template>
	<view>
		<view class="box-header">
			<view :class="{'box-header-l': true, 'box-header-l-landscape' : isLandscape }">
				<view class="box-header-title">自检系统V1.0</view>
				<view>
					<picker mode="date" @change="changeDay">
						<view class="box-header-time">
							<text style="margin:0 auto;">{{query.type == 1 ? query.start_time || '单日数据' :  '单日数据' }}</text>
							<image :src="ossUrl + `/static/29.png`" mode=""></image>
						</view>
					</picker>
				</view>
				<view class="box-header-more" @click="open">
					<text style="margin:0 auto;">{{ query.type == 2 ? query.start_time + '至' + query.end_time : '日期区间' }}</text>
					<image :src="ossUrl + `/static/29.png`" mode=""></image>
				</view>
			</view>
		</view>
		<template v-if="info">
			<Table :isLandscape="false" v-if="info.type == 1" :type="2" ref="tableRef" :isHttp="true" v-model="query" :info="info"/>
			<Echart v-else v-model="query" ref="EchartRef"/>
		</template>
		<view class="content">
			<view class="lvli">
				<view class="lvli-list" v-for="(it,index) in list">
					<view class="lvli-list-tx">
						<view class="lvli-list-tx-time">{{getTime(it.add_time,2)}}</view>
						<view class="lvli-list-tx-day">{{getTime(it.add_time,3)}}</view>
					</view>
					<view class="lvli-list-left">
						<view class="lvli-list-spot">
							<image :src="`/static/${index === 0 ? 'xz' : 'xz1'}.png`" mode=""></image>
						</view>
						<view class="lvli-list-line" v-if="index != (list.length-1)"></view>
					</view>
					<view class="lvli-list-rig" :style="{paddingBottom: index === (list.length-1) ? '0rpx' : '81rpx'}">
						<view class="lvli-list-rig-title">
              高尔夫训练  <span @click="delComment(it.id)" v-if="it.del_type === 1">删除</span>
            </view>
						<view class="lvli-list-rig-c">
							<view class="lvli-list-rig-c-tx">
								成绩：<text>{{it.time_axis.total_rod_number_sum}}</text></view>
							<view class="lvli-list-rig-c-tx">
								距离：<text>{{it.time_axis.max_distance_avg}}</text></view>
							<view class="lvli-list-rig-c-tx">
								上球道：<text>{{it.time_axis.fairway_hit_rate_percent}}</text></view>
							<view class="lvli-list-rig-c-tx">
								上果岭：<text>{{it.time_axis.green_in_regulation_rate_percent}}</text></view>
							<view class="lvli-list-rig-c-tx">
								界外球：<text>{{it.time_axis.out_of_bounds_count_sum}}</text></view>
							<view class="lvli-list-rig-c-tx">
								下水数：<text>{{it.time_axis.water_hazard_rate_percent}}</text></view>
							<view class="lvli-list-rig-c-tx">
								沙坑数：<text>{{it.time_axis.sand_trap_rate_percent}}</text></view>
							<view class="lvli-list-rig-c-tx">切杆数：<text>{{it.time_axis.chip_shots_sum}}</text>
							</view>
							<view class="lvli-list-rig-c-tx">推杆数：<text>{{it.time_axis.putts_sum}}</text>
							</view>
						</view>
						<view class="lvli-list-rig-comment">{{it.content}}</view>
						<template v-for="(item,index) in it.upload">
							<image :src="item" mode=""  mode="widthFix"
								v-if="$getIsImage(item) === 1" @click="MpreviewImage(it.upload,index)"></image>
							<video :src="item" v-if="$getIsImage(item) === 2"></video>
						</template>
					</view>
				</view>
			</view>
		</view>
		<datePicker ref="datePickerRef" @confirm="confirm" :value="[query.start_time,query.end_time]"/>
	</view>
</template>

<script>
	import Table from '@/components/table/table.vue'
	import Echart from '@/pagesA/components/echart/echart.vue'
	import datePicker from '@/pagesA/components/datePicker/datePicker.vue'
	import {
		InformationTimeAxis,InformationTimeAxisForm
	} from '@/common/http/api.js'
	import {
		formatTimestamp
	} from '@/common/time.js'
  import {InformationDelLog} from "../../common/http/api";
	export default {
		components: {
			Table,
			Echart,
			datePicker
		},
		data() {
			return {
				//分页
				params: {
					page: 1
				},
				isList: true,
				list: [],
				query:{
					type: 1,
					id: '',
					start_time: '',
					end_time:'' 
				},
				info: '',
				isLandscape: false
			};
		},
		onLoad(e) {
			if (e?.id) {
				this.params.id = e.id
				this.query.id = e.id
			}
			//this.getDetail()
			this.reload()
			this.getData()
		},
		onReachBottom() {
			console.log('触底')
			if (this.isList) {
				this.params.page++
				this.init()
			}
		},
		methods: {
			formatTimestamp,
      delComment(id){
        uni.showModal({
          title: '',
          content: '是否确认删除？',
          showCancel: true,
          cancelText: '取消',
          confirmText: '确认',
          confirmColor: '#E4393C',
          success: res => {
            if (res.confirm) {
              console.log('用户点击确认按钮');
              InformationDelLog({id}).then(res=>{
                this.reload()
              })
            }
          }
        });
      },
			open(){
				this.$refs.datePickerRef.show()
			},
			confirm(e){
				console.log('confirm', e)
				if(Array.isArray(e) && e.length > 0) {
					this.query.start_time = e[0]
					this.query.end_time = e[e.length - 1]
					this.query.type = 2
					this.getData()
				}
			},
			getData(){
				uni.showLoading()
				InformationTimeAxisForm(this.query).then(res=>{
					uni.hideLoading()
					if(Array.isArray(res.data) && res.data.length === 0) {
						this.info = {
							type: 1,
							result: '',
							list: []
						}
					} else {
						this.info = res.data
					}
					if(this.info.type === 1){
						
						this.$nextTick(()=>{
							this.$refs.tableRef.show(this.info.list,this.info.time_axis_Statistics)
						})
					} else {
						this.$nextTick(()=>{
							this.$refs.EchartRef.show(this.info.list)
						})
					}
				})
			},
			changeDay(e){
				console.log('e',e)
				this.query.start_time = e.detail.value
				this.query.end_time = e.detail.value
				this.query.type = 1
				this.getData()
			},
			getDetail(){
				InformationTimeAxisForm(this.form).then(res=>{
					this.$nextTick(()=>{
						this.$refs.tableRef.show(res.data.list)
					})
				})
			},
			getTime(t, type) {
				let time = ''
				try {
					time = this.formatTimestamp(Number(t), type)
				} catch (e) {
					//TODO handle the exception
				}
				return time
			},
			getValue(value) {
				if (value > 0) {
					return value.toFixed(2)
				}
				return 0
			},
			reload() {
				this.params.page = 1
				this.list = []
				this.init()
			},
			init() {
				uni.showLoading()
				InformationTimeAxis(this.params).then(res => {
					uni.hideLoading()
					if (Array.isArray(res.data.list) && res.data.list.length > 0) {
						if (this.params.page === 1) {
							this.list = res.data.list
						} else {
							this.list = this.list.concat(res.data.list)
						}
					} else {
						this.isList = false
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	image {
		width: 100%;
		height: 100%;
	}

	.lvli {
		background: #FFFFFF;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 38rpx 26rpx;
		margin-top: 121rpx;

		.lvli-list {
			display: flex;

			.lvli-list-tx {
				width: 100rpx;
				margin-right: 26rpx;

				.lvli-list-tx-time {
					font-family: PingFang;
					font-weight: 400;
					font-size: 24rpx;
					color: #282828;
					text-align: center;
				}

				.lvli-list-tx-day {
					font-family: PingFang;
					font-weight: 400;
					font-size: 30rpx;
					color: #282828;
					text-align: center;
				}
			}

			.lvli-list-left {
				width: 30rpx;
				height: auto;
				position: relative;

				.lvli-list-spot {
					width: 30rpx;
					height: 30rpx;
				}

				.lvli-list-line {
					width: 1rpx;
					height: calc(100% - 60rpx);
					background: #282828;
					position: absolute;
					top: 30rpx;
					left: 0;
					right: 0;
					bottom: 0;
					margin-top: 20rpx;
					margin: auto;
					transform: translateX(-50%);
				}
			}

			.lvli-list-rig {
				flex: 1;
				margin-left: 21rpx;
				padding-bottom: 47rpx;

				.lvli-list-rig-title {
					width: 100%;
					font-family: PingFang;
					font-weight: 400;
					font-size: 36rpx;
					color: #282828;
          display: flex;
          align-items: center;
          span {
            font-size: 22rpx;
            color: #e4393c;
            margin-left: 20rpx;
          }
				}

				.lvli-list-rig-c {
					box-sizing: border-box;
					padding: 14rpx 12rpx;
					display: flex;
					flex-wrap: wrap;
					background: #F6F7F8;
					border-radius: 10rpx;
					margin-bottom: 14rpx;

					.lvli-list-rig-c-tx {
						font-family: PingFang;
						font-weight: 400;
						font-size: 22rpx;
						color: #292929;
						margin-right: 36rpx;

						text {
							color: #15971E;
						}
					}
				}

				.lvli-list-rig-comment {
					font-family: PingFang;
					font-weight: 800;
					font-size: 24rpx;
					color: #292929;
					margin-bottom: 16rpx;
				}

				&>image {
					width: 100%;
					height: 194rpx;
					margin-bottom: 20rpx;
				}
				&>video {
					width: 100%;
					height: 194rpx;
					margin-bottom: 20rpx;
				}
			}
		}
	}
	.box-header {
		width: 100%;
		padding: 19.5px 15px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		background: #343434;
		border-top-right-radius: 15px;
		border-top-left-radius: 15px;
		.box-header-l {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
	
			.box-header-title {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 13px;
				color: #FFFFFF;
			}
	
			.box-header-time {
	
				height: 28px;
				background: #FFFFFF;
				border-radius: 14px;
				display: flex;
				align-items: center;
				box-sizing: border-box;
				padding: 8.5px 2.5px;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 13px;
				color: #292929;
	
				image {
					width: 13px;
					height: 13px;
					margin-left: 5px;
				}
			}
	
			.box-header-more {
				min-width: 155px;
				height: 28px;
				background: #FFFFFF;
				border-radius: 14px;
				display: flex;
				align-items: center;
				box-sizing: border-box;
				padding: 8.5px 2.5px;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 13px;
				color: #292929;
	
				image {
					width: 13px;
					height: 13px;
					margin-left: 5px;
				}
			}
		}
	
		.box-header-l-landscape {
			flex: unset !important;
	
			&>view {
				margin-right: 20px;
			}
		}
	
		.box-header-l-r {
			display: flex;
			align-items: center;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 13px;
			color: #FFFFFF;
	
			image {
				width: 21px;
				height: 21px;
				margin-right: 5px;
			}
		}
	}
</style>